import React, { useState } from 'react';
import { COMMENTS } from './data/index';
import CommentList from './components/CommentList';
import CommentFilter from './components/CommentFilter';
import CommentInput from './components/CommentInput';

const CommentApp = () => {
  const [comments, setComments] = useState(COMMENTS);
  const [filterCondition, setFilterCondition] = useState('ALL');

  // 筛选规则：5为好评，2、3、4为中评，1为差评
  let commentsWithFilter;
  if (filterCondition === 'GOOD')
    commentsWithFilter = comments.filter((item) => Number(item.rating) === 5);
  else if (filterCondition === 'BAD')
    commentsWithFilter = comments.filter((item) => Number(item.rating) === 1);
  else
    commentsWithFilter = comments.filter(
      (item) => Number(item.rating) >= 2 && Number(item.rating) <= 4
    );

  return (
    <div data-testid="app" className="app">
      <CommentInput comments={comments} setComments={setComments} />
      <br />
      <CommentFilter setFilterCondition={setFilterCondition} />
      <CommentList comments={filterCondition === 'ALL' ? comments : commentsWithFilter} />
    </div>
  );
};

export default CommentApp;
